import T from "base/intl";
import React from "react";
import { useState } from "react";
import Nodes from "./node";
import imgUrl from "../images/1.jpeg";
export default function FlippableImage(props) {
  const [isFlipped, setIsFlipped] = useState(false);

  const imageClick = (e) => {
    console.log("imageClick", isFlipped);
    e.stopPropagation();
    e.preventDefault();
    setIsFlipped(!isFlipped);
  };
  console.log("isFlipped", isFlipped);
  return (
    <Nodes.flippableImageContainer onClick={imageClick}>
      <div
        onClick={imageClick}
        className={`flippable-image-wrapper fadeIn ${isFlipped && "isFlipped"}`}
      >
        <div className="front" onClick={imageClick}>
          <img src={props.imgUrl}></img>
        </div>
        <div className="back">
          <h3 className="title">title</h3>
          <p className="desc">
            {T(
              "撒啊搜配电间阿萨法哦【批发价【啊啊东京暗【打过架【都感觉阿萨德【感觉阿萨德【感觉阿萨德【感觉【啊四大金刚【打过架\n          ",
              "_95613a"
            )}
          </p>
        </div>
      </div>
    </Nodes.flippableImageContainer>
  );
}
